<template>
    <div>

        <div class="abs cover contaniner">
            <div class="abs cover pnl">
                <div class="top pnl-head" style="padding: 20px ; color: white;">
                    <div id="userName"> 用户：张三<span style='float: right;color: green'>在线</span></div>
                    <div id="chatMes" style="text-align: center;color: #6fbdf3;font-family: 新宋体">
                        <!--正在和 <font face="楷体">张三</font> 聊天-->
                    </div>
                </div>
                <!--聊天区开始-->
                <div class="abs cover pnl-body" id="pnlBody">
                    <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
                        <div class="abs cover pnl-left" id="chatArea" style="display: none">
                            <div class="abs cover pnl-msgs scroll" id="show">
                                <div class="pnl-list" id="hists">
                                    <!-- 历史消息 -->
                                </div>
                                <div class="pnl-list" id="msgs">

                                    <!-- 消息这展示区域 -->
                                    <!-- <div class="msg guest"><div class="msg-right"><div class="msg-host headDefault"></div><div class="msg-ball">你好</div></div></div>
                        <div class="msg robot"><div class="msg-left" worker=""><div class="msg-host photo" style="background-image: url(img/avatar/Member002.jpg)"></div><div class="msg-ball">你好</div></div></div>-->
                                </div>
                            </div>

                            <div class="abs bottom pnl-text">
                                <div class="abs cover pnl-input">
                                    <textarea class="scroll" id="context_text" wrap="hard"
                                        placeholder="在此输入文字信息..."></textarea>
                                    <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                        <ul class="atcom" id="atcom"></ul>
                                    </div>
                                </div>

                                <div class="abs br pnl-btn" id="submit"
                                    style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">
                                    发送
                                </div>
                                <div class="pnl-support" id="copyright"><a href="http://www.itcast.cn">传智播客,版本所有</a>
                                </div>
                            </div>
                        </div>

                        <!--聊天区 结束-->

                        <div class="abs right pnl-right">
                            <div class="slider-container hide"></div>
                            <div class="pnl-right-content">
                                <div class="pnl-tabs">
                                    <div class="tab-btn active" id="hot-tab">好友列表</div>
                                </div>
                                <div class="pnl-hot">
                                    <ul class="rel-list unselect" id="userlist">
                                        <!--<li class="rel-item"><a onclick='showChat("张三")'>张三</a></li>
							<li class="rel-item"><a onclick='showChat("李四")'>李四</a></li>-->
                                    </ul>
                                </div>
                            </div>

                            <div class="pnl-right-content">
                                <div class="pnl-tabs">
                                    <div class="tab-btn active">系统广播</div>
                                </div>
                                <div class="pnl-hot">
                                    <ul class="rel-list unselect" id="broadcastList">
                                        <!--<li class="rel-item" style="color: #9d9d9d;font-family: 宋体">您的好友 张三 已上线</li>
							<li class="rel-item" style="color: #9d9d9d;font-family: 宋体">您的好友 李四 已上线</li>-->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    mounted(){
        this.init()
    },
    data() {
        return {

        }
    },
    methods: {
        init() {
            //创建webSocket对象
            let ws = new WebSocket("ws://localhost:8888/chat");
            //给ws绑定事件
            ws.onopen = function () {
                //在建立连接后需要做什么事？
                //显示在线信息
                console.log('创建成功')
            }

            //接收到服务端推送的消息后触发
            ws.onmessage = function (evt) {
                //获取服务端推送过来的消息
                var dataStr = evt.data;
                //将dataStr 转换为json对象
                var res = JSON.parse(dataStr);
                //判断是否是系统消息
                console.log(evt)
            }

            ws.onclose = function () {
                //显示离线信息
            }
        }
    }
}
</script>